<template>
	<div class="filter-user">
		<!-- title -->
		<div class="title-menu" @click="conShow = true">
			<mt-navbar v-model="selected">
			  <mt-tab-item class='com-border-right-nav' ref='nrbs' id="mt-tab1">状态</mt-tab-item>
			  <mt-tab-item class='com-border-right-nav' id="mt-tab2">性别</mt-tab-item>
			  <mt-tab-item id="mt-tab3">综合</mt-tab-item>
			</mt-navbar>
		</div>
		<!-- content -->
		<transition name='slide-fade'>
			<div class="tab-content" v-if="conShow" @click="offCon">
				<mt-tab-container v-model="selected" v-if="" class="mt-con">
				  <mt-tab-container-item id="mt-tab1">
				    <div class="mt-tab1" @click="selState">
				    	<div class="space-between com-border-bottom" data-index='0'>
				    		已实名<i class="iconfont icon-youjiantou"></i>
				    	</div>
				    	<div class="space-between com-border-bottom" data-index='1'>
				    		未实名<i class="iconfont icon-youjiantou"></i>
				    	</div>
				    	<div class="space-between com-border-bottom" data-index='2'>
				    		待审核<i class="iconfont icon-youjiantou"></i>
				    	</div>
				    </div>
				  </mt-tab-container-item>
				  <mt-tab-container-item id="mt-tab2">
				    <div class="mt-tab2" @click="selSex">
				    	<div class="space-between" data-index='0'>
				    		男<i class="iconfont icon-youjiantou"></i>
				    	</div>
				    	<div class="space-between" data-index='1'>
				    		女<i class="iconfont icon-youjiantou"></i>
				    	</div>
				    	<div class="space-between" data-index='2'>
				    		不限<i class="iconfont icon-youjiantou"></i>
				    	</div>
				    </div>
				  </mt-tab-container-item>
				  <mt-tab-container-item id="mt-tab3">
				    <div class="mt-tab3" @click="selOrder">
				    	<div class="space-between" data-index='0'>
				    		等级<i class="iconfont icon-youjiantou"></i>
				    	</div>
				    	<div class="space-between" data-index='1'>
				    		..<i class="iconfont icon-youjiantou"></i>
				    	</div>
				    	<div class="space-between" data-index='2'>
				    		..<i class="iconfont icon-youjiantou"></i>
				    	</div>
				    </div>
				  </mt-tab-container-item>
				</mt-tab-container>
			</div>
		</transition>
	</div>
</template>

<script type="text/javascript">
	import {Toast, Indicator} from 'mint-ui'
	export default {
		data(){
			return {
				msg: 'filter user',
				selected: false,
				conShow: false,
			}
		},
		computed: {
		},
		created() {
			this.show()
			// this.addRBor() // 只渲染一次，ref不可在此应用
		},
		updated() {
			this.addRBor()
		},
		methods: {
			addRBor() {
				// console.log(this.$refs.nrbs.$vnode.elm.childNodes[2])
				// console.log(this.$refs)
				// this.$refs.nrbs.$vnode.elm.childNodes[2].className += ' nav-right-border'
			},
			show(){
				console.log(this.msg)
			},
			offCon(e){
				// console.log(e)
				let className = e.target.className
				if (className.toLowerCase().indexOf('tab-content') > -1) {
					this.conShow = false
				} 
				this.selected = false
			},
			closeCon() {
				let _this = this
        setTimeout(() => {
        	_this.conShow = false
        	_this.selected = false
        }, 1000)
			},
			changeSty(e) {
				e.parentNode.childNodes.forEach(i => {i.className = 'space-between'})
				e.className += ' filter-active'
			},
			selState(e) {
				let index = e.target.dataset.index
				// console.log(index)
        let v = e.target
        this.changeSty(v)
        this.$emit('filterState',index)
        this.closeCon()
			},
			selSex(e) {
				let index = e.target.dataset.index
				console.log(index)
				let v = e.target
        this.changeSty(v)
        this.closeCon()
			},
			selOrder(e) {
				let index = e.target.dataset.index
				console.log(index)
				let v = e.target
        this.changeSty(v)
        this.closeCon()
			}
		},
	}
</script>

<style type="text/css">
	.slide-fade-enter-active {
	  transition: all .3s ease;
	}
	.slide-fade-leave-active {
	  transition: all .3s;
	}
	.slide-fade-enter, .slide-fade-leave-to
	/* .slide-fade-leave-active for below version 2.1.8 */ {
	  transform: translateY(100%);
	  opacity: 0;
	}
	.tab-content{
		position: fixed;
	  z-index: 500;
	  display: flex;
	  margin-top: 3px;
	  flex-direction: column;
	  justify-content: space-between;
	  width: 100%;
	  height: 100%;
	  /* overflow: scroll; */
	  -webkit-overflow-scrolling: touch;
	  background: rgba(0, 0, 0, .2) 
	}
	.mt-con{
		background: #fff;
	}
	.space-between{
		line-height: 50px;
    width: 90%;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 14px;
    color: #585858;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
	}
	.filter-active{
	  color: #f4cb08 !important;
	  font-weight: bold;
	}
</style>